<template>
  <div class="main">
    <!-- 顶部搜索 -->
    <div class="top">
      <img src="../../assets/logo.png" />
      <div>
        <input type="text" placeholder="寻找宝贝店铺" />
      </div>
      <div></div>
    </div>

    <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../assets/nav/1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/nav/2.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/nav/3.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/nav/4.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/nav/5.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/nav/6.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 轮播2 -->
    <!-- Swiper -->
    <div class="swiper-container" :key="list.time">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 1</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- 列表 -->
    <div>
      <div class="aixin">
        ➡<span class="iconfont icon-aixin">你可能还喜欢⬅</span>
      </div>
    </div>
    <div class="list">
      <ul class="item-list">
        <li
          v-for="(listItem, index) in list"
          :key="index"
          @click="detailAction(listItem.gdsCode)"
        >
          <img :src="listItem.pictureUrl" />
          <p>
            {{ listItem.gdsName }}
          </p>
          <span>￥{{ listItem.price }}</span>
          <br />
          <span>{{ Math.floor(Math.random() * 1000) }}人已购买</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入axios
import uri from "../../config/uri";
import axios from 'axios'
// icon图标
import "@/assets/icon-font/icon/iconfont.css";

// 轮播图
import Vue from "vue";
import { Swipe, SwipeItem, Lazyload } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);

Vue.use(Lazyload);
// swiper轮播
// 导入swiper
import Swiper from "swiper"; // 相当于导入js
import "swiper/swiper-bundle.min.css";

// 列表

export default {
  data() {
    return {
      images: [
        { id: 1, img: "../../assets/nav/1.jpg" },
        { id: 2, img: "../../assets/nav/2.jpg" },
        { id: 3, img: "../../assets/nav/1.jpg" },
        { id: 4, img: "../../assets/nav/1.jpg" },
        { id: 5, img: "../../assets/nav/1.jpg" },
        { id: 6, img: "../../assets/nav/1.jpg" },
      ],
      list: [{ time: Date.parse(new Date()) }],
    };
  },

  created() {
    // 请求数据
    axios.get('https://www.fastmock.site/mock/837cbc5dbd6125fbb37d9e50c2487f2e/website/list').then((res) => {
      let listData = res.skus;
      // console.log(res);
      this.list = listData;
      console.log(this.list);
    });
  },
  methods: {
    detailAction(id) {
      this.$router.push("/detail/" + id);
      console.log(id);
    },
  },

  mounted() {
    new Swiper(".swiper-container", {
      slidesPerView: 3,
      slidesPerColumn: 2,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  margin-bottom: 100px;
}
.top {
  height: 49px;
  background: rgb(255, 133, 42);
  padding: 6px;
}
.top > img {
  float: left;
  width: 35px;
  height: 30px;
  margin-top: 7px;
}
.top > div > input {
  /* display: block; */
  float: left;
  width: 240px;
  height: 30px;
  margin-top: 10px;
  margin-left: 30px;
  border-radius: 5px;
  outline: none;
  border: none;
  background: #ff4e22;
  text-align: center;
}

input::-webkit-input-placeholder {
  color: white;
}
input::-moz-placeholder {
  color: white;
}
input:-moz-placeholder {
  color: white;
}
input:-ms-input-placeholder {
  color: white;
}

/* 轮播 */
.swiper-container {
  height: 200px;
}

/* 轮播图 1*/
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 130px; */
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe .van-swipe-item > img {
  width: 100%;
  vertical-align: middle;
}

/* 轮播图2 */
/* 列表 */
.list {
  background-color: rgb(242, 242, 242);
}
.aixin {
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: rgb(255, 79, 0);
  background-color: rgb(242, 242, 242);
}
.list > .item-list {
  width: 100%;
  background-color: rgb(242, 242, 242);
}
.item-list {
  width: 45%;
  display: flex;
  flex-wrap: wrap;
}
.list > .item-list > li {
  width: 50%;
  background-color: white;
}
.item-list > li > img {
  width: 170px;
  height: 171px;
  border-radius: 10px;
}
</style>